<template>
  <div class="employ box">
    <h4 class="caption">会议日程</h4>
    <ul class="infinite-list roomList">
      <li class="box item">
        <p class="title">人民大会堂无纸化会议室</p>
        <span class="state">空闲</span>
      </li>
      <li class="box item">
        <p class="title">人民大会堂无纸化会议室</p>
        <span class="state">空闲</span>
      </li>
      <li class="box item">
        <p class="title">人民大会堂无纸化会议室</p>
        <span class="state busy">占用</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.employ {
  width: 400px;
  height: 300px;
  .roomList{
    height: 300px;
    .item{
      display: flex;
      justify-content: space-around;
      margin: 0 15px;
      margin-right: 25px;
      padding: 10px;
      .title {
        font-size: 25px;
        color: #5E5E5E;
        width: 265px;
      }
      .state {
        font-size: 20px;
        color: #4745C5;
      }
      .busy {
        color: #FF0000;
      }
    }
  }
}
.box {
  border-radius: 20px;
  box-shadow: 4px 3px 7px 0px #00000036;
  letter-spacing: 5px;
  .caption {
    margin:5px 15px;
    font-size: 25px;
    font-weight: normal;
    color: #5E5E5E;
  }
}

</style>